<template>
  <div class="student-management-container">
    <!-- 输入框和搜索按钮区域开始 -->
    <div class="btns">
      <el-form :inline="true" :model="form" class="demo-form-inline" size="medium">
        <el-row :gutter="20">
          <!-- 搜索区域整体居中 -->
          <el-col :span="24" class="search-col">
            <el-form-item label="学生姓名">
              <el-input 
                v-model="form.studentName" 
                placeholder="请输入学生姓名" 
                clearable
                @clear="getStudentData"
                class="search-input"
              ></el-input>
            </el-form-item>
            <el-form-item label="学生状态">
              <el-select 
                v-model="form.studentStatus" 
                placeholder="请选择学生状态" 
                clearable
                @clear="getStudentData"
                @change="getStudentData"
                class="search-select"
              >
                <el-option label="在校" value="inSchool"></el-option>
                <el-option label="毕业" value="graduated"></el-option>
                <el-option label="休学" value="suspension"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="getStudentData">搜索</el-button>
            </el-form-item>
            <!-- 重置按钮放在搜索区右侧，保持布局平衡 -->
            <el-form-item class="reset-item">
              <el-button type="text" @click="resetSearch">重置筛选</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 输入框和搜索按钮区域结束 -->

    <!-- 表格区域开始（外层容器控制居中+宽度） -->
    <div class="table-container">
      <el-table 
        :data="studentData" 
        border 
        style="width: 100%" 
        :loading="tableLoading"
        empty-text="暂无学生数据"
        size="small"
      >
        <!-- 序号列 -->
        <el-table-column 
          type="index" 
          :index="(index) => (params.page - 1) * params.pageSize + index + 1" 
          label="序号" 
          width="80" 
          align="center"
        ></el-table-column>
        <!-- 学生学号列 -->
        <el-table-column 
          prop="studentNo" 
          label="学生学号" 
          width="160" 
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <!-- 学生姓名列 -->
        <el-table-column 
          prop="studentName" 
          label="学生姓名" 
          width="120" 
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <!-- 学生性别列 -->
        <el-table-column 
          prop="gender" 
          label="性别" 
          align="center"
          width="80"
        >
          <template v-slot="scope">
            <el-tag 
              v-if="scope.row.gender === 'male'"
              type="info"
              size="mini"
            >男</el-tag>
            <el-tag 
              v-else
              type="success"
              size="mini"
            >女</el-tag>
          </template>
        </el-table-column>
        <!-- 学生年龄列 -->
        <el-table-column 
          prop="age" 
          label="年龄" 
          align="center"
          width="80"
        >
          <template v-slot="scope">{{ scope.row.age || '未知' }}</template>
        </el-table-column>
        <!-- 学生状态列（标签展示） -->
        <el-table-column 
          prop="studentStatus" 
          label="学生状态" 
          align="center"
          width="140"
        >
          <template v-slot="scope">
            <el-tag 
              v-if="scope.row.studentStatus === 'inSchool'"
              effect="dark"
              type="success"
              size="mini"
            >在校</el-tag>
            <el-tag 
              v-else-if="scope.row.studentStatus === 'graduated'"
              effect="dark"
              type="danger"
              size="mini"
            >毕业</el-tag>
            <el-tag 
              v-else
              effect="dark"
              type="warning"
              size="mini"
            >休学</el-tag>
          </template>
        </el-table-column>
        <!-- 操作列（仅保留查看功能） -->
        <el-table-column 
          label="操作" 
          align="center"
          width="100"
        >
          <template v-slot="scope">
            <el-link 
              @click="viewStudentDetail(scope.row)" 
              :underline="false" 
              type="primary"
              size="small"
            >查看</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 表格区域结束 -->

    <!-- 分页区域开始（整体居中，包含标题） -->
    <div class="pagination-wrap">
      <!-- 分页标题（如“共 X 条数据”）居中显示 -->
      <div class="pagination-title">
        共 {{ totalCount }} 条学生数据
      </div>
      <!-- 分页控件居中 -->
      <el-pagination 
        hide-on-single-page 
        @size-change="handleSizeChange" 
        @current-change="handleCurrentChange"
        :current-page="params.page" 
        :page-sizes="[5, 10, 15, 20]" 
        :page-size="params.pageSize"
        layout="sizes, prev, pager, next, jumper" 
        :total="totalCount"
        background
        size="small"
        class="pagination-control"
      ></el-pagination>
    </div>
    <!-- 分页区域结束 -->

    <!-- 学生详情弹窗 -->
    <el-dialog 
      :title="`学生详情 - ${formDetail.studentName || ''}`" 
      :visible.sync="detailVisible"
      width="70%"
      :close-on-click-modal="false"
      center
      :before-close="handleDialogClose"
    >
      <el-form :model="formDetail" label-width="120px" size="medium">
        <el-row :gutter="30">
          <!-- 学生基础信息 -->
          <el-col :span="12">
            <el-form-item label="学生学号">
              <span>{{ formDetail.studentNo || '-' }}</span>
            </el-form-item>
            <el-form-item label="学生姓名">
              <span>{{ formDetail.studentName || '-' }}</span>
            </el-form-item>
            <el-form-item label="性别">
              <span>
                <el-tag 
                  v-if="formDetail.gender === 'male'"
                  type="info"
                  size="mini"
                  disabled
                >男</el-tag>
                <el-tag 
                  v-else
                  type="success"
                  size="mini"
                  disabled
                >女</el-tag>
                {{ formDetail.gender ? '' : '-' }}
              </span>
            </el-form-item>
            <el-form-item label="年龄">
              <span>{{ formDetail.age || '未知' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学生状态">
              <span>
                <el-tag 
                  v-if="formDetail.studentStatus === 'inSchool'"
                  effect="dark"
                  type="success"
                  size="mini"
                  disabled
                >在校</el-tag>
                <el-tag 
                  v-else-if="formDetail.studentStatus === 'graduated'"
                  effect="dark"
                  type="danger"
                  size="mini"
                  disabled
                >毕业</el-tag>
                <el-tag 
                  v-else
                  effect="dark"
                  type="warning"
                  size="mini"
                  disabled
                >休学</el-tag>
                {{ formDetail.studentStatus ? '' : '-' }}
              </span>
            </el-form-item>
            <el-form-item label="入学时间">
              <span>{{ formDetail.enrollmentTime ? this.$moment(formDetail.enrollmentTime).format('YYYY-MM-DD') : '-' }}</span>
            </el-form-item>
          </el-col>

          <!-- 学生简介 -->
          <el-col :span="24">
            <el-form-item label="学生简介">
              <el-card shadow="never" border class="intro-card">
                <div style="line-height: 1.8; white-space: pre-line;">
                  {{ formDetail.studentDesc || '暂无学生简介' }}
                </div>
              </el-card>
            </el-form-item>
          </el-col>

          <!-- 学生课表（仅在校学生显示） -->
          <el-col :span="24" v-if="formDetail.studentStatus === 'inSchool'">
            <el-form-item label="学生课表">
              <div class="schedule-wrapper">
                <el-table 
                  :data="classScheduleData" 
                  border 
                  size="small"
                  :empty-text="`暂无${formDetail.studentName}的课表数据`"
                >
                  <el-table-column 
                    prop="day" 
                    label="星期" 
                    width="100" 
                    align="center"
                    header-align="center"
                  ></el-table-column>
                  <el-table-column 
                    prop="section" 
                    label="节次" 
                    width="100" 
                    align="center"
                    header-align="center"
                  ></el-table-column>
                  <el-table-column 
                    prop="courseName" 
                    label="课程名称" 
                    width="200" 
                    align="center"
                    header-align="center"
                    show-overflow-tooltip
                  ></el-table-column>
                  <el-table-column 
                    prop="teacher" 
                    label="授课老师" 
                    width="150" 
                    align="center"
                    header-align="center"
                    show-overflow-tooltip
                  ></el-table-column>
                  <el-table-column 
                    prop="classroom" 
                    label="教室" 
                    width="150" 
                    align="center"
                    header-align="center"
                    show-overflow-tooltip
                  ></el-table-column>
                  <el-table-column 
                    prop="time" 
                    label="上课时间" 
                    align="center"
                    header-align="center"
                    show-overflow-tooltip
                  ></el-table-column>
                </el-table>
              </div>
            </el-form-item>
          </el-col>

          <!-- 非在校学生提示 -->
          <el-col :span="24" v-else>
            <el-form-item label="课表提示">
              <el-tag type="info" size="mini">非在校学生暂不展示课表</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  name: 'StudentManagement',
  data() {
    return {
      // 搜索表单数据
      form: {
        studentName: '',    // 学生姓名
        studentStatus: ''   // 学生状态
      },
      // 表格数据相关
      studentData: [],     // 学生列表数据
      tableLoading: false, // 表格加载状态
      totalCount: 0,       // 数据总条数
      // 分页参数
      params: {
        page: 1,           // 当前页码
        pageSize: 10       // 每页条数
      },
      // 详情弹窗相关
      detailVisible: false, // 详情弹窗显示状态
      formDetail: {},        // 学生详情数据
      classScheduleData: [], // 学生课表数据
      // 写死的学生数据（含陈十三、褚十四）
      mockStudentData: [
        {
          studentNo: '20230001',
          studentName: '张三',
          gender: 'male',
          age: 20,
          studentStatus: 'inSchool',
          enrollmentTime: '2023-09-01',
          studentDesc: '张三同学学习刻苦，成绩优异，是班级里的学习委员。'
        },
        {
          studentNo: '20230002',
          studentName: '李四',
          gender: 'female',
          age: 19,
          studentStatus: 'inSchool',
          enrollmentTime: '2023-09-01',
          studentDesc: '李四同学性格开朗，积极参加各类校园活动。'
        },
        {
          studentNo: '20220001',
          studentName: '王五',
          gender: 'male',
          age: 21,
          studentStatus: 'graduated',
          enrollmentTime: '2022-09-01',
          studentDesc: '王五同学已顺利毕业，曾获得校级奖学金。'
        },
        {
          studentNo: '20230003',
          studentName: '赵六',
          gender: 'male',
          age: 20,
          studentStatus: 'suspension',
          enrollmentTime: '2023-09-01',
          studentDesc: '赵六同学因个人原因休学，期待他早日返校。'
        },
        {
          studentNo: '20230004',
          studentName: '孙七',
          gender: 'female',
          age: 19,
          studentStatus: 'inSchool',
          enrollmentTime: '2023-09-01',
          studentDesc: '孙七同学热爱运动，是校篮球队成员。'
        },
        {
          studentNo: '20230005',
          studentName: '周八',
          gender: 'male',
          age: 20,
          studentStatus: 'inSchool',
          enrollmentTime: '2023-09-01',
          studentDesc: '周八同学对编程有浓厚兴趣，经常参加编程竞赛。'
        },
        {
          studentNo: '20230006',
          studentName: '吴九',
          gender: 'female',
          age: 19,
          studentStatus: 'inSchool',
          enrollmentTime: '2023-09-01',
          studentDesc: '吴九同学擅长绘画，作品曾在校园展览中展出。'
        },
        {
          studentNo: '20230007',
          studentName: '郑十',
          gender: 'male',
          age: 20,
          studentStatus: 'inSchool',
          enrollmentTime: '2023-09-01',
          studentDesc: '郑十同学担任班级班长，工作认真负责。'
        },
        {
          studentNo: '20220002',
          studentName: '钱十一',
          gender: 'female',
          age: 21,
          studentStatus: 'graduated',
          enrollmentTime: '2022-09-01',
          studentDesc: '钱十一同学毕业后进入知名企业工作。'
        },
        {
          studentNo: '20230008',
          studentName: '冯十二',
          gender: 'male',
          age: 20,
          studentStatus: 'inSchool',
          enrollmentTime: '2023-09-01',
          studentDesc: '冯十二同学喜欢音乐，是校园乐队的吉他手。'
        },
        {
          studentNo: '20230009',
          studentName: '陈十三',
          gender: 'female',
          age: 18,
          studentStatus: 'inSchool',
          enrollmentTime: '2023-09-01',
          studentDesc: '陈十三同学性格文静，喜欢阅读，语文成绩突出，是班级的语文课代表，曾获市级中学生作文比赛一等奖。'
        },
        {
          studentNo: '20230010',
          studentName: '褚十四',
          gender: 'male',
          age: 19,
          studentStatus: 'inSchool',
          enrollmentTime: '2023-09-01',
          studentDesc: '褚十四同学热爱物理实验，动手能力强，曾参与校级物理竞赛并获二等奖，课余常泡在实验室研究创新项目。'
        }
      ],
      // 写死的课表数据（含陈十三、褚十四）
      mockClassScheduleData: {
        '20230001': [
          { day: '周一', section: '1-2节', courseName: '高等数学', teacher: '张老师', classroom: '101教室', time: '08:30-10:00' },
          { day: '周一', section: '3-4节', courseName: '大学英语', teacher: '李老师', classroom: '201教室', time: '10:20-11:50' },
          { day: '周二', section: '1-2节', courseName: '数据结构', teacher: '王老师', classroom: '301教室', time: '08:30-10:00' },
          { day: '周二', section: '3-4节', courseName: '操作系统', teacher: '赵老师', classroom: '401教室', time: '10:20-11:50' },
          { day: '周三', section: '5-6节', courseName: '计算机网络', teacher: '孙老师', classroom: '501教室', time: '14:30-16:00' }
        ],
        '20230002': [
          { day: '周一', section: '1-2节', courseName: '大学物理', teacher: '周老师', classroom: '102教室', time: '08:30-10:00' },
          { day: '周一', section: '3-4节', courseName: '线性代数', teacher: '吴老师', classroom: '202教室', time: '10:20-11:50' },
          { day: '周二', section: '5-6节', courseName: '概率论', teacher: '郑老师', classroom: '302教室', time: '14:30-16:00' },
          { day: '周三', section: '1-2节', courseName: '大学语文', teacher: '钱老师', classroom: '103教室', time: '08:30-10:00' },
          { day: '周四', section: '3-4节', courseName: '普通化学', teacher: '冯老师', classroom: '203教室', time: '10:20-11:50' }
        ],
        '20230004': [
          { day: '周一', section: '5-6节', courseName: '篮球训练', teacher: '陈老师', classroom: '体育馆', time: '14:30-16:00' },
          { day: '周二', section: '1-2节', courseName: '高等数学', teacher: '张老师', classroom: '101教室', time: '08:30-10:00' },
          { day: '周三', section: '3-4节', courseName: '大学英语', teacher: '李老师', classroom: '201教室', time: '10:20-11:50' },
          { day: '周四', section: '5-6节', courseName: '运动生理学', teacher: '杨老师', classroom: '402教室', time: '14:30-16:00' },
          { day: '周五', section: '1-2节', courseName: '体育理论', teacher: '黄老师', classroom: '303教室', time: '08:30-10:00' }
        ],
        '20230005': [
          { day: '周一', section: '3-4节', courseName: 'C语言编程', teacher: '刘老师', classroom: '机房1', time: '10:20-11:50' },
          { day: '周二', section: '5-6节', courseName: '数据结构', teacher: '王老师', classroom: '301教室', time: '14:30-16:00' },
          { day: '周三', section: '3-4节', courseName: '算法设计', teacher: '马老师', classroom: '机房2', time: '10:20-11:50' },
          { day: '周四', section: '1-2节', courseName: '计算机组成原理', teacher: '朱老师', classroom: '401教室', time: '08:30-10:00' },
          { day: '周五', section: '5-6节', courseName: '编程竞赛辅导', teacher: '胡老师', classroom: '机房3', time: '14:30-16:00' }
        ],
        '20230006': [
          { day: '周一', section: '1-2节', courseName: '素描基础', teacher: '林老师', classroom: '美术室1', time: '08:30-10:00' },
          { day: '周二', section: '5-6节', courseName: '色彩理论', teacher: '何老师', classroom: '美术室2', time: '14:30-16:00' },
          { day: '周三', section: '3-4节', courseName: '艺术史', teacher: '郭老师', classroom: '502教室', time: '10:20-11:50' },
          { day: '周四', section: '1-2节', courseName: '油画技法', teacher: '高老师', classroom: '美术室3', time: '08:30-10:00' },
          { day: '周五', section: '5-6节', courseName: '创作实践', teacher: '罗老师', classroom: '美术室1', time: '14:30-16:00' }
        ],
        '20230007': [
          { day: '周一', section: '5-6节', courseName: '班级管理', teacher: '宋老师', classroom: '302教室', time: '14:30-16:00' },
          { day: '周二', section: '1-2节', courseName: '高等数学', teacher: '张老师', classroom: '101教室', time: '08:30-10:00' },
          { day: '周三', section: '5-6节', courseName: '大学英语', teacher: '李老师', classroom: '201教室', time: '14:30-16:00' },
          { day: '周四', section: '3-4节', courseName: '思想政治', teacher: '韩老师', classroom: '402教室', time: '10:20-11:50' },
          { day: '周五', section: '1-2节', courseName: '演讲与口才', teacher: '曹老师', classroom: '503教室', time: '08:30-10:00' }
        ],
        '20230008': [
          { day: '周一', section: '3-4节', courseName: '音乐理论', teacher: '彭老师', classroom: '音乐室1', time: '10:20-11:50' },
          { day: '周二', section: '5-6节', courseName: '吉他演奏', teacher: '郎老师', classroom: '音乐室2', time: '14:30-16:00' },
          { day: '周三', section: '1-2节', courseName: '和声基础', teacher: '席老师', classroom: '音乐室1', time: '08:30-10:00' },
          { day: '周四', section: '5-6节', courseName: '乐队排练', teacher: '岳老师', classroom: '排练厅', time: '14:30-16:00' },
          { day: '周五', section: '3-4节', courseName: '音乐欣赏', teacher: '费老师', classroom: '音乐室3', time: '10:20-11:50' }
        ],
        '20230009': [
          { day: '周一', section: '1-2节', courseName: '大学语文', teacher: '钱老师', classroom: '103教室', time: '08:30-10:00' },
          { day: '周一', section: '3-4节', courseName: '中国历史', teacher: '史老师', classroom: '204教室', time: '10:20-11:50' },
          { day: '周二', section: '5-6节', courseName: '大学英语', teacher: '李老师', classroom: '201教室', time: '14:30-16:00' },
          { day: '周三', section: '1-2节', courseName: '文学鉴赏', teacher: '文老师', classroom: '305教室', time: '08:30-10:00' },
          { day: '周四', section: '3-4节', courseName: '思想政治', teacher: '韩老师', classroom: '402教室', time: '10:20-11:50' }
        ],
        '20230010': [
          { day: '周一', section: '1-2节', courseName: '高等数学', teacher: '张老师', classroom: '101教室', time: '08:30-10:00' },
          { day: '周一', section: '3-4节', courseName: '大学物理', teacher: '周老师', classroom: '102教室', time: '10:20-11:50' },
          { day: '周二', section: '1-2节', courseName: '物理实验', teacher: '验老师', classroom: '实验室1', time: '08:30-10:00' },
          { day: '周三', section: '5-6节', courseName: '线性代数', teacher: '吴老师', classroom: '202教室', time: '14:30-16:00' },
          { day: '周四', section: '3-4节', courseName: '大学英语', teacher: '李老师', classroom: '201教室', time: '10:20-11:50' }
        ]
      }
    }
  },
  filters: {
    fmtDate(val) {
      return val ? moment(val).format('YYYY-MM-DD HH:mm') : '-'
    }
  },
  methods: {
    // 获取学生列表数据（使用写死数据）
    getStudentData() {
      this.tableLoading = true
      // 模拟接口请求延迟
      setTimeout(() => {
        try {
          let filteredData = [...this.mockStudentData]
          // 姓名筛选
          if (this.form.studentName) {
            filteredData = filteredData.filter(item => 
              item.studentName.includes(this.form.studentName)
            )
          }
          // 状态筛选
          if (this.form.studentStatus) {
            filteredData = filteredData.filter(item => 
              item.studentStatus === this.form.studentStatus
            )
          }
          // 分页处理
          const startIndex = (this.params.page - 1) * this.params.pageSize
          const endIndex = startIndex + this.params.pageSize
          this.studentData = filteredData.slice(startIndex, endIndex)
          this.totalCount = filteredData.length
        } catch (error) {
          console.error('处理学生数据异常：', error)
          this.$message.error('系统异常，请联系管理员')
          this.studentData = []
          this.totalCount = 0
        } finally {
          this.tableLoading = false
        }
      }, 500)
    },

    // 每页条数改变
    handleSizeChange(val) {
      this.params.pageSize = val
      this.params.page = 1 // 重置为第一页
      this.getStudentData()
    },

    // 当前页码改变
    handleCurrentChange(val) {
      this.params.page = val
      this.getStudentData()
    },

    // 重置搜索条件
    resetSearch() {
      this.form = {
        studentName: '',
        studentStatus: ''
      }
      this.params.page = 1
      this.params.pageSize = 10
      this.getStudentData()
    },

    // 查看学生详情：加载基础信息+对应课表
    viewStudentDetail(row) {
      // 深拷贝学生基础信息，避免修改原数据
      this.formDetail = JSON.parse(JSON.stringify(row))
      // 根据学生学号匹配课表数据
      this.classScheduleData = this.mockClassScheduleData[row.studentNo] || []
      // 显示弹窗
      this.detailVisible = true
    },

    // 关闭弹窗时重置数据
    handleDialogClose() {
      this.formDetail = {}
      this.classScheduleData = []
      this.detailVisible = false
    }
  },
  created() {
    // 初始化学生列表
    this.getStudentData()
    // 挂载moment到Vue实例，方便模板使用
    this.$moment = moment
  }
}
</script>

<style lang="scss" scoped>
// 全局容器：控制页面内边距，避免内容贴边
.student-management-container {
  padding: 20px 40px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 40px);
}

// 搜索区域：整体居中，优化控件间距
.btns {
  margin-bottom: 25px;
  padding: 15px 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.search-col {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; // 适配小屏幕，避免溢出
}

.search-input {
  width: 280px;
  margin-right: 15px;
}

.search-select {
  width: 200px;
  margin-right: 15px;
}

.reset-item {
  margin-left: auto; // 把重置按钮推到右侧，保持布局平衡
}

// 表格容器：核心控制表格居中+宽度，避免过宽
.table-container {
  max-width: 1100px; // 限制表格最大宽度，根据需求调整
  margin: 0 auto 30px; // 上下间距+水平居中
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

// 空数据提示样式优化
::v-deep .el-table__empty-text {
  padding: 40px 0;
  color: #909399;
  font-size: 14px;
}

// 分页区域：整体居中，标题+控件上下排列
.pagination-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
}

// 分页标题（共X条数据）：居中+样式优化
.pagination-title {
  font-size: 13px;
  color: #606266;
  margin-bottom: 8px;
  padding: 4px 12px;
  border-radius: 4px;
  background-color: #f0f2f5;
}

// 分页控件：居中显示
.pagination-control {
  display: flex;
  justify-content: center;
}

// 弹窗样式优化
::v-deep .el-dialog__body {
  padding: 20px 30px;
  max-height: 60vh;
  overflow-y: auto; // 内容过多时可滚动
}

::v-deep .el-form-item {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

// 学生简介卡片样式
.intro-card {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 15px;
  background: #fafafa;
  color: #303133;
  font-size: 14px;
}

// 课表容器样式
.schedule-wrapper {
  margin-top: 10px;
  ::v-deep .el-table th {
    background-color: #f5f7fa;
    font-weight: 500;
  }
}

// 弹窗底部按钮样式
.dialog-footer {
  text-align: center;
  ::v-deep .el-button {
    min-width: 80px;
  }
}

// 适配小屏幕：避免控件溢出
@media (max-width: 768px) {
  .student-management-container {
    padding: 15px 10px;
  }

  .search-input {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }

  .search-select {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }

  .reset-item {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }

  .table-container {
    max-width: 100%;
    margin: 0 auto 20px;
  }
}
</style>